<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="content">
      <!-- 头部功能 -->
      <template #header>
        <div>
          <el-button type="primary" size="medium" @click="addDialog=true">添加角色</el-button>
        </div>
      </template>
      <!-- 正文内容 -->
      <el-table
        :data="rolesList"
        style="width: 100%"
        border
        size="small"
        v-loading="loading"
        row-key="id"
        :tree-props="{ children: 'list' }"
        @expand-change="openColumn"
      >
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column
          type="expand"
          label="明细"
          width="50px"
          #default="{ row }"
        >
          <el-empty
            v-if="!row.children || row.children.length == 0"
            :image-size="40"
            description="未分配权限"
          ></el-empty>
          <!-- 参考代码 -->
          <RolesTreeList
            class="role-box"
            :list="row.children"
            caret
            #default="itemB"
          >
            <RolesTreeList
              :list="itemB.list"
              type="success"
              caret
              #default="itemC"
            >
              <RolesTreeList :list="itemC.list" type="warning"></RolesTreeList>
            </RolesTreeList>
          </RolesTreeList>
        </el-table-column>

        <el-table-column
          type="index"
          label="序号"
          width="50px"
        ></el-table-column>
        <el-table-column
          label="角色名称"
          min-width="330px"
          prop="roleName"
        ></el-table-column>
        <el-table-column
          label="角色描述"
          min-width="330px"
          prop="roleDesc"
        ></el-table-column>

        <el-table-column label="操作" width="330px" #default="{ row }">
          <el-button type="primary" size="mini" icon="el-icon-edit"
          style="margin:0 10px"
          @click="modifyRole(row)"
            >编辑</el-button
          >
          <el-popconfirm title="确认删除这个角色吗？" @confirm="deleteRoles(row.id)">
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              slot="reference"
              >删除</el-button
            >
          </el-popconfirm>
          <el-button type="warning" size="mini" icon="el-icon-setting"
          style="margin:0 10px"
            >分配权限</el-button
          >
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 弹层 -->
    <AddRoles :visible.sync="addDialog"></AddRoles>
    <ModifyRoles :visible.sync="modifyDialog" :choose-role-form="chooseRole"></ModifyRoles>
  </div>
</template>

<script>
import RolesTreeList from "@/components/rolesPage/RolesTreeList";
import AddRoles from '@/components/rolesPage/AddRoles';
import ModifyRoles from '@/components/rolesPage/ModifyRoles'
export default {
  components: {
    RolesTreeList,AddRoles,ModifyRoles
  },
  data() {
    return {
      loading: false,
      rolesList: [],
      addDialog: false,
      // =======
      modifyDialog:false,
      chooseRole:{
        id:null,
        roleName:'',
        roleDesc:''
      }
    };
  },
  methods: {
    async initRolesList() {
      try {
        this.loading = true;
        let result = await this.$api.getRolesList();
        console.log(result);
        if (result == "error") return;
        this.rolesList = result;
      } catch (error) {
        console.log("订单列表加载错误:", error);
      } finally {
        this.loading = false;
      }
    },
    async deleteRoles(id) {
      try {
        let result = await this.$api.deleteRolesById(id);
        if (result == "error") return;
        // console.log(result);
        this.$notify({
          title: '角色删除成功',
          type: 'success'
        });
        this.initRolesList();
      } catch (error) {
        console.log("商品删除错误:", error);
      }
    },
    modifyRole(row){
      this.chooseRole.id = row.id;
      this.chooseRole.roleName = row.roleName;
      this.chooseRole.roleDesc = row.roleDesc;
      this.modifyDialog = true;
      console.log(this.chooseRole);
    },
    async openColumn(row) {
      try {
        console.log(row);
      } catch (error) {
        console.log("角色数据加载错误:", error);
      }
    },
  },
  created() {
    this.initRolesList();
  },
};
</script>


<style lang="less" scoped>
.content,
.el-pagination {
  margin-top: 20px;
}
.el-card {
  .el-table {
    font-size: 14px;
    .goodsTab {
      margin: 20px 3%;
    }
  }
}
.search-input {
  width: 300px;
}
.add-btn {
  margin-left: 20px;
}
</style>